<template>
	<view class="content">
		<view class="fortune_contianer">
			<view class="fortune_box">
				<view class="fortune_box__title">
					<text>连续签到</text>
					<text style="color: #E62732;font-size: 46upx;margin: 0 10upx;">{{signInDays}}</text>
					<text>天</text>
				</view>
				<view class="fortune_box__content">
					<view class="tagBox" ref="tagBoxRef">
						<view class="tag" ref="tagRef" :style="{'margin-left':marginLeft}">
							<text>今日奖励福分</text>
							<text class="triangle" ref="triangleRef" :style="{'left': left, 'right': right}"></text>
						</view>
					</view>

					<view class="signin_list">
						<view class="item_list_up">
							<view class="item_img" v-for="(item,index) in signInRewardList" :key="index" :class="[signInList[index].status == 0 ? 'no' : 'yes']">
								<text class="fortuneNum" v-if="signInList[index].status == 0">{{item.count}}</text>
								<view class="coin" v-else>
									<image src="static/coin.png" style="width: 100%;height: 100%;"></image>
								</view>
							</view>
						</view>
						<view class="item_list_down">
							<text v-for="(item,index) in signInList" :key="index" :class="[item.status == 0 ? '' : 'textYes']">
								<!-- #ifdef MP -->
								{{dateFormat(item.day_time)}}
								<!-- #endif -->
								<!-- #ifndef MP -->
								{{item.day_time | dateFormat}}
								<!-- #endif -->
							</text>
							<!-- <text v-for="(item,index) in signInList" :key="index" :class="[item.status == 0 ? '' : 'textYes']">{{dateFormat(item.day_time)}}</text> -->
						</view>
					</view>
				</view>
			</view>
			<button class="task_button" ref="signInRef" :disabled="!canSignIn" @tap="signIn" :class="[{canNoSignIn: !canSignIn ,hasSignIn: hasSignIn}]">{{hasSignIn ? '已签到' : '签到'}}</button>
		</view>
		<view class="task_list">
			<view class="task_list__item" v-for="(item,index) in taskList" :key="index">
				<view class="item_left">
					<view class="item_icon">
						<image :src="imgsrc + item.img" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="item_content">{{item.name}}</view>
					<text class="item_fortune">福分+{{item.count}}</text>
				</view>
				<view class="item_button" @tap="palyTask(item.path, item.status)" :class="[item.status == 1 ? 'final' : '']">{{item.status == 0 ? '去完成' : '已完成'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import {
		formatDate,
		dateAddDays
	} from '@/common/date.js';
	export default {
		components: {

		},
		computed: {
			signInDays() {
				return this.signInList.reduce((pre, cur) => {
					return pre + (cur.status == 1 ? 1 : 0)
				}, 0)
			},
			dateFormat(){
				return (val)=>{
					let date = formatDate(new Date(val.toString().replace(/(\d{4})(\d{2})(\d{2})/, '$1/$2/$3')), 'MM.dd');
					if (date.charAt(0) == '0') date = date.substr(1);
					return date;
				}
			}
		},
		filters: {
			dateFormat(val) {
				let date = formatDate(new Date(val.toString().replace(/(\d{4})(\d{2})(\d{2})/, '$1/$2/$3')), 'MM.dd');
				if (date.charAt(0) == '0') date = date.substr(1);
				return date;
			}
		},
		data() {
			return {
				imgsrc: Api.imgsrc,
				signInRewardList: [], //签到奖励列表
				signInList: [], //连续签到列表
				taskList: [], //任务列表
				hasSignIn: false, //是否有签到
				todayDate: '', //今日日期 格式为yyyyMMdd
				canSignIn: true,
				marginLeft:0,
				right:0,
				left:0
			}
		},
		onLoad(options) {
			
			// //#ifndef MP

			// //#endif
			// //#ifdef MP
			// if (options.state == 0) {
			// 	this.loadData()
			// }
			// //#endif

		},
		onShow() {
			this.initData();
			this.loadData();
		},

		methods: {
			async loadData() {
				let params = {},
					method = 'post',
					data = await Api.apiCall(method, Api.fortune.fortune_signin_list, params);
				if (data) {
					this.signInRewardList = data.config;
					// this.signInList = data.logins;
					let todayDate = data.logins[0].day_time.toString().replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')
					this.todayDate = data.logins[0].day_time.toString();

					data.config.forEach((e, index) => {
						if (Object.prototype.toString.call(data.logins[index]) == '[object Undefined]') {

							let addDateNum = (index + 1) - data.logins.length;

							this.signInList.push({
								day_time: formatDate(new Date(dateAddDays(todayDate, addDateNum).replace(/-/g, '/')), 'yyyyMMdd'),
								status: 0
							})
						}
					})
					this.hasSignIn = data.logins[0].status == 1;
					this.signInList.unshift(...data.logins.reverse());
					let calcIndex = this.signInList.findIndex(e => Number(e.day_time) == Number(this.todayDate))
					this.taskList = data.runnable;
					this.calcX(calcIndex);
				}
			},
			initData(){
				this.imgsrc = Api.imgsrc;
				this.signInRewardList = []; //签到奖励列表
				this.signInList = []; //连续签到列表
				this.taskList = []; //任务列表
				this.hasSignIn = false; //是否有签到
				this.todayDate = ''; //今日日期 格式为yyyyMMdd
				this.canSignIn = true;
			},
			async signIn() {
				this.canSignIn = false;
				let params = {},
					method = 'post',
					data = await Api.apiCall(method, Api.fortune.fortune_signin, params).then(e => this.hasSignIn = true);
				this.signInList.forEach(e => {
					if (e.day_time == this.todayDate) e.status = 1;
					this.canSignIn = false;
				})
			},
			/**
			 * @param {Object} index
			 * @description TODO
			 */
			palyTask(url, status) {
				if(status == 0){
					uni.navigateTo({
						url: url
					})
				}
			},
			calcX(index) {
				// console.log(`fortuneBoxRef: ${this.$refs.tagBoxRef.$el.clientWidth}  tagRef: ${this.$refs.tagRef.$el.clientWidth}`)

				let calcIndex = Number(index),
					dateStart = 1,
					dateEnd = 7;
				this.$nextTick(() => {
					if ((calcIndex >= dateStart) && (calcIndex < (dateEnd - 1))) {
						this.marginLeft = `${uni.upx2px((calcIndex - 1) * 95 + 50)}px`
						this.left = 'unset';
						this.right = 'unset'
						
						// this.$refs.tagRef.$el.style.marginLeft = `${calcIndex * 25}px`;
					} else if ((calcIndex + 1) == dateStart) {
						this.left = `${uni.upx2px(20)}px`
						this.right = 'unset'
						// this.$refs.triangleRef.$el.style.left = `10px`
					} else if ((calcIndex + 1) == dateEnd) {
						this.marginLeft = `${uni.upx2px((calcIndex - 1) * 95)}px`
						// this.marginLeft = `${this.$refs.tagBoxRef.$el.clientWidth - this.$refs.tagRef.$el.clientWidth}px`;
						this.right = `${uni.upx2px(20)}px`;
						this.left = 'unset'
						// this.$refs.tagRef.$el.style.marginLeft = `${this.$refs.tagBoxRef.$el.clientWidth - this.$refs.tagRef.$el.clientWidth}px`;
						// this.$refs.triangleRef.$el.style.right = `10px`
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.content {
		.fortune_contianer {
			box-sizing: border-box;
			padding: 0 50upx 58upx 50upx;
			background-color: #FFBC21;
			position: relative;
			height: 546upx;
			display: flex;
			flex-flow: column;
			align-items: center;
			overflow: hidden;
			margin-bottom: 33upx;
			
			border-radius: 0 0 700upx 700upx/0 0 150upx 150upx;

			// &::before {
			// 	content: '';
			// 	width: 300vw;
			// 	height: 300vw;
			// 	background-color: #FFBC21;
			// 	border-radius: 50%;
			// 	position: absolute;
			// 	bottom: 0;
			// 	z-index: 1;
			// }

			.fortune_box {
				box-sizing: border-box;
				padding: 0 7upx;
				margin-bottom: 40upx;
				background-color: #FFF;
				width: 100%;
				border-radius: 20upx;
				display: flex;
				flex-flow: column wrap;
				align-items: center;
				box-shadow: 0 5upx 10upx rgba(204, 66, 66, 0.2);
				z-index: 1;
				height: 350upx;

				&__title {
					color: #232323;
					font-weight: 400;
					font-size: 32upx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 98upx;
					width: 100%;
					border-bottom: 1upx solid #F0F3F5;
				}

				&__content {
					box-sizing: border-box;
					width: 100%;
					padding: 0upx 10upx;
					display: flex;
					flex-flow: column wrap;

					.tagBox {
						width: 100%;
						margin-bottom: 20upx;
						box-sizing: border-box;
						padding-top: 10upx;

						.tag {
							display: inline-flex;
							box-sizing: border-box;
							align-items: center;
							justify-content: center;
							position: relative;
							width: 160upx;
							height: 50upx;
							border-radius: 25upx;
							background-color: #FFC64B;
							color: #FFF;
							font-size: 22upx;

							.triangle {
								position: absolute;
								bottom: -10upx;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 5px 5px 0 5px;
								border-color: #FFC64B transparent transparent transparent;
							}
						}
					}

					.signin_list {
						display: flex;
						flex-flow: column wrap;
						box-sizing: border-box;
						width: 100%;
						// height: 110upx;
						font-size: 22upx;
						color: #232323;
						overflow: hidden;

						.item_list_up {
							display: flex;
							flex-flow: row nowrap;
							box-sizing: border-box;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							height: 74upx;
							margin-bottom: 10upx;

							.item_img {
								background-color: #FE5654;
								width: 52upx;
								height: 62upx;
								border-radius: 10upx;
								// margin-bottom: 15upx;
								font-size: 20upx;
								color: #FFC64B;
								display: inline-flex;
								justify-content: center;
								align-items: center;
								position: relative;
								overflow: hidden;
								transition: all 100ms ease;

								&::before {
									content: '';
									width: 100upx;
									height: 100upx;
									border-radius: 50%;
									background-color: #FF887C;
									position: absolute;
									top: -70upx;
									z-index: 1;
								}

								.fortuneNum {
									width: 29upx;
									height: 29upx;
									border-radius: 50%;
									display: inline-flex;
									justify-content: center;
									align-items: center;
									background-color: #FFFB86;
									z-index: 2;
								}

								&.no {
									opacity: 0.5;
								}

								&.yes {
									width: 60upx;
									height: 74upx;
								}

								.coin {
									width: 45upx;
									height: 45upx;
									z-index: 2;
								}
							}
						}

						.item_list_down {
							width: 100%;
							display: flex;
							flex-flow: row nowrap;
							box-sizing: border-box;
							justify-content: space-between;

							text {
								width: 52upx;
								display: inline-flex;
								justify-content: center;

								&.textYes {
									width: 60upx;
								}
							}
						}
					}
				}
			}

			.task_button {
				width: 488upx;
				height: 98upx;
				font-size: 28upx;
				color: #000;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				background-image: linear-gradient(to bottom, #FFFCEA, #FFEF85);
				border-radius: 49upx;
				box-shadow: 0 5upx 10upx rgba(204, 66, 66, 0.2);
				z-index: 1;

				&.hasSignIn {
					background-image: unset;
					background-color: #c5c4c8;
					color: #FFF;
					pointer-events: none;
					cursor: default;
				}

				&.canNoSignIn {
					pointerEvents: none;
				}
			}
		}

		.task_list {
			width: 100%;

			&__item {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 21upx 29upx;
				width: 100%;
				border-bottom: 1upx solid #F0F3F5;

				&:nth-child(1) .item_icon {
					background-image: linear-gradient(to bottom, #F9D0EC, #EACDF4);
				}

				&:nth-child(2) .item_icon {
					background-image: linear-gradient(to bottom, #FFD8DA, #FBC4C9);
				}

				&:nth-child(3) .item_icon {
					background-image: linear-gradient(to bottom, #FFF1BA, #FFE8A4);
				}

				&:nth-child(4) .item_icon {
					background-image: linear-gradient(to bottom, #D4E7FE, #CFDAFF);
				}

				&:nth-child(5) .item_icon {
					background-image: linear-gradient(to bottom, #FFD9C0, #FAC9AC);
				}

				.item_left {
					display: flex;
					flex-flow: row nowrap;
					align-items: center;
					color: #313332;
					font-size: 28upx;

					.item_icon {
						width: 116upx;
						height: 116upx;
						border-radius: 20upx;
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
					}

					.item_content {
						width: 225upx;
						margin: 0 44upx 0 24upx;
					}
				}

				.item_button {
					width: 140upx;
					height: 58upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 29upx;
					background-color: #FFBA36;
					color: #FFF;
					font-size: 26upx;

					&.final {
						background-color: #E1E4E5;
					}
				}
			}
		}
	}
</style>
